import { Avatar, Drawer, List, Row } from 'antd';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import moment from 'moment';

export const AnnounceHomeRight: React.FC<AnnounceHomeAPI.IAnnounceHomeRight> = ({
  announceInfoObj,
  prefixCls,
  visible,
  onClose,
}) => {
  /**
   * 处理字符串截取第一位
   * @param nameStr
   * @returns
   */
  const handViewAvatar = (nameStr: string) => {
    let newStr: string = '';
    if (nameStr) {
      newStr = nameStr?.substring(0, 1);
    }
    return newStr;
  };

  return (
    <>
      <Drawer
        open={visible}
        title={<div style={{ marginLeft: 10 }}>预览记录</div>}
        onClose={onClose}
        style={{ position: 'absolute' }}
        placement="right"
        getContainer={false}
        headerStyle={{
          padding: '.5rem',
        }}
        width={document.body.clientWidth * 0.25}
        bodyStyle={{
          padding: 0,
        }}
        destroyOnClose={false}
        closable={false}
      >
        <ScrollBarLayout
          style={{
            padding: '10px',
          }}
        >
          <div className={'compile-avatar'}>
            <List
              className={prefixCls + 'rightViewStyles'}
              itemLayout="horizontal"
              dataSource={announceInfoObj?.viewList}
              renderItem={(item: any) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={
                      <div>
                        <Avatar
                          size="large"
                          icon={handViewAvatar(item?.viewerName)}
                        />
                      </div>
                    }
                    title={
                      <div
                        style={{
                          fontWeight: 600,
                          fontSize: 16,
                        }}
                      >
                        {item.viewerName}
                        &nbsp;&nbsp;
                        {moment(item.createTime).format('YYYY-MM-DD')}
                      </div>
                    }
                    description={
                      <>
                        <Row>
                          <div
                            style={{
                              maxWidth: '95%',
                              color: '#5c5c5c',
                            }}
                          >
                            【{item?.viewDepartmentName || '--'}】-【
                            {item?.viewPositionName || '--'}】
                          </div>
                        </Row>
                        {/* <Row>
                          <div
                            style={{
                              textAlign: 'right',
                              width: '95%',
                              fontSize: '14px',
                            }}
                          >
                            {moment(item.createTime).format('YYYY-MM-DD')}
                          </div>
                        </Row> */}
                      </>
                    }
                  />
                </List.Item>
              )}
            />
          </div>
        </ScrollBarLayout>
      </Drawer>
    </>
  );
};
